import React, { memo } from 'react';
import { Tooltip } from 'antd';
import classNames from 'classnames';
import salaryStyle from '@/pages/SalaryManage/salaryManage.less';
import styles from './index.less';

/**
 * @param name
 * @param rate
 * @param type
 * @param title
 * @param numberType
 * @constructor
 */

//  表单百分比展示
const PercentWrapper = ({ name = '', rate = '', type, title = '', numberType = true }) => (
    <Tooltip placement="top" title={title}>
        <span className={classNames({ [salaryStyle.currency]: numberType })}> {name}</span>
        <span className={classNames(styles.rate, styles[type], title ? styles.pointer : '')}>
            {type ? (
                <i
                    className={classNames('icon', 'iconfont', type === 'up' ? 'iconTopArrowIcon' : 'iconDownArrowIcon')}
                />
            ) : null}
            {rate}
        </span>
    </Tooltip>
);

export default memo(PercentWrapper);
